<template>
    <div class="meituan">
        <c-title text="抖音团购"></c-title>
        <van-tabs v-model="active" @click="onClick" ref="tabs" title-active-color="#FE5E56" line-width="0.9375rem">
            <van-tab title="全部" name="-2"></van-tab>
            <van-tab title="待结算" name="0"></van-tab>
            <van-tab title="已结算" name="1"></van-tab>
            <van-tab title="已失效" name="-1"></van-tab>
        </van-tabs>
        <div class="box" v-if="list && list.length !== 0">
            <div class="item" v-for="(item, i) in list" :key="i">
                <div class="title">
                    <div class="flex">
                        <span class="order-number">订单号：{{ item.third_order_sn }}</span>
                        <span style="width:0.9375rem; height:0.9375rem; margin-left: 0.25rem;"
                            v-clipboard:copy="item.third_order_sn" v-clipboard:success="onCopy">
                            <img src="../../assets/images/TikTok/copy.png" width="100%" height="100%" />
                        </span>
                    </div>
                    <div class="status"
                        :class="{ 'finish': item.status == 1, 'wating': item.status == 0, 'lose-efficacy': item.status == -1 }">
                        {{ orderStatus(item.status) }}
                    </div>
                </div>
                <div class="content">
                    <div class="img">
                        <img :src="item.pic" />
                    </div>
                    <div class="content-right">
                        <div class="content-title">
                            <span class="meituan">抖音</span>
                            <span>{{ item.name }}</span>
                        </div>
                        <div class="detail">
                            <div>
                                <span class="c-999">付款时间:</span>
                                <span class="ml-10">{{ item.pay_time }}</span>
                            </div>
                            <div class="close_an_account" v-if="item.settle_time">
                                <span class="c-999">结算时间:</span>
                                <span class="ml-10">{{ item.settle_time }}</span>
                            </div>
                            <div class="pay_money">
                                <span class="c-999">支付金额:</span>
                                <span class="c-ff6238 ml-10">{{ $i18n.t('money') }}{{ item.pay_amount }}</span>
                            </div>
                            <!-- <div class="c-ff6238">下单返{{ item.order_reward }}</div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
export default {
    mixins: [scrollMixin],
    data() {
        return {
            list: [],
            active: '-2',

            status: "",
            current_page: 1,
            last_page: 1,
            isLoadMore: true,

            integral: window.localStorage.integral || "积分",
        };
    },
    activated() {
        this.isLoadMore = true;
        let json = { page: 1 }
        if (this.$route.params.status !== 'undefined') {
            let _status = this.$route.params.status.toString();
            this.active = _status;
            json.status = _status;
        }
        this.getData(json);
    },
    methods: {
        onCopy() {
            this.$toast("复制成功");
        },
        orderStatus(number) {
            if (number == 0) {
                return "待结算";
            } else if (number == 1) {
                return "已结算";
            } else {
                return "已失效";
            }
        },
        onClick() {
            let status = this.active;
            this.status = status;
            this.getData({ status, page: 1 });
        },
        async getData(json) {
            let { msg, result, data } = await $http.get("plugin.tiktok-group-buy.api.order.order-list", json);
            if (result == 0) {
                return this.$toast(msg);
            }
            if (json.page == 1) {
                this.list = data.data || [];
            } else if (json.page > 1) {
                this.list = this.list.concat(data.data);
            }
            this.current_page = data.current_page;
            this.last_page = data.last_page;
            this.isLoadMore = true;
        },
        getMoreData() {
            if (this.current_page >= this.last_page) {
                return;
            }
            this.isLoadMore = false;
            let page = this.current_page + 1;
            this.getData({ page: page, status: this.status });
        }
    }
};
</script>

<style scoped lang="scss">
::v-deep .van-tabs__line {
    bottom: 20px !important;
}

.meituan {
    .order-number {
        color: #00001C;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .meituan {

        background-color: #000;
        color: #fff;
        border-radius: 0.25rem;
        padding: 0 0.25rem;
        height: 1.0625rem;
        line-height: 1.0625rem;
        font-size: 11px;
        margin-right: 0.3125rem;
    }

    .content-right {
        overflow: hidden;
        flex: 1;
    }

    .content {
        display: flex;
        margin-top: 0.8125rem;
    }

    .img {
        width: 6.5rem;
        height: auto;
        margin-right: 0.5rem;

        img {
            width: 100%;
            // height:100%;
            border-radius: 0.625rem;
        }
    }

    .c-999 {
        color: #999;
    }

    .ml-10 {
        margin-left: 0.3125rem;
    }

    .wating {
        color: #F15353;
    }

    .fz24 {
        font-size: 0.75rem;
    }

    .c-ff6238 {
        color: #F15353;
    }

    .pay_money {
        margin-top: 0.625rem;
        margin-bottom: 0.5938rem;
    }

    .close_an_account {
        margin-top: 0.5rem;
        margin-bottom: 0.625rem;
    }

    .detail {
        text-align: left;
        font-size: 0.75rem;
        margin-top: 0.5625rem;
        color: #6E6E79;
    }

    .flex {
        display: flex;
    }

    .content-title {
        text-align: left;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 0.8125rem;
        line-height: 1;
    }

    .status {
        flex-shrink: 0;
        text-wrap: nowrap;
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.8125rem;
    }

    .finish {
        color: #6E6E79;
    }

    .lose-efficacy {
        color: #6E6E79;
    }

    .item {
        margin: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        background: #fff;
        padding: 0.75rem;
    }
}
</style>